<template>
  <div>
<!--头部区域开始-->
    <div style="height: 60px; display: flex; /*align-items: center; border-bottom: 1px solid #eee;*/" >
      <div style="width:240px;display: flex; align-items: center;padding-left: 15px; background-color: #eea6ed">
<!--        ctrl+shift+上键 向上-->
        <img style="width: 40px; height: 40px;border-radius: 50%" src="../assets/imgs/logo.jpg" alt="">
        <span style="font-size: 12px; font-weight: bold; color: #f8f4f7;margin-left: 5px">KittenKit Management System</span>
      </div>
      <div style="flex: 1; display:flex; align-items:center;border-bottom: 1px solid #ddd; padding-left: 20px">
        <span style="margin-right: 5px;cursor: pointer" @click="router.push('/manager/home')">Home</span> / <span style="margin-left: 5px;">{{router.currentRoute.value.meta.name}}</span>
      </div>
      <div style="width: fit-content; padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex;align-items: center">
            <img v-if="data.user?.avatar" style="width: 40px; height: 40px; border-radius: 50%" :src="data.user?.avatar"/>
            <img v-else style="width: 40px; height: 40px; border-radius: 50%" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
            <span style="margin-left: 5px">{{ data.user?.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>
<!--头部区域结束-->


<!--  下方区域开始  -->
    <div style="display: flex">
      <!--  菜单区域开始  -->
      <div style="width: 240px; box-shadow: 0 0 8px rgba(0,0,0,.12)">
<!--         :default-openeds="['1']" : 默认展开 -->
        <el-menu router :default-openeds="['1','2']" :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>Home</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Monitor /></el-icon>
                <span>信息管理</span>
            </template>
            <el-menu-item index="/manager/notice" v-if="data.user.role === 'ADMIN'">系统公告</el-menu-item>
            <el-menu-item index="/manager/notice" v-else>公告信息</el-menu-item>
            <el-menu-item index="/manager/category">攻略分类</el-menu-item>
            <el-menu-item index="/manager/introduction">旅游攻略</el-menu-item>
            <el-menu-item index="/manager/apply">请假申请</el-menu-item>
            <el-menu-item index="/manager/book">图书信息</el-menu-item>
            <el-menu-item index="/manager/record">借阅记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--  菜单区域结束  -->

      <!--  数据渲染区域开始 -->
      <div style="flex: 1;width: 0; padding: 10px; background-color: #faf4fa">
        <RouterView @updateUser="updateUser"/>
      </div>
      <!--  数据渲染区域结束 -->
    </div>
<!--  下方区域结束  -->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {reactive} from "vue"

const data = reactive({
  user: JSON.parse(localStorage.getItem('code2025_user') || "{}")
})

const updateUser = () => {
  //因为传过来这边的时候localstorage已经更新了在这里直接拿就可以
  data.user = JSON.parse(localStorage.getItem("code2025_user") || '{}')
}

const logout = () => {
  localStorage.removeItem("code2025_user")
  location.href = '/login'
}

if(!data.user?.id){
  location.href = '/login'
}

//检测缓存中有没有用户信息
// let userStr = localStorage.getItem('code2025_user')
// if(userStr) {
//   let user = JSON.parse(userStr)
//   if(!user.id){
//     location.href = '/login'
//   }
// }else{
//   location.href = '/login'
// }
</script>

<style>
.el-menu {
  background-color: #FFD9E6; /* 主背景改为柔粉红（降低饱和度） */
  border: none;
  box-shadow: 0 0 8px rgba(0,0,0,.12)
}

.el-sub-menu__title {
  background-color: #FFD9E6;
  color: #FF6B6B; /* 文字改为柔和的玫瑰粉（提升可读性） */
}

.el-menu-item {
  height: 50px;
  color: #FF6B6B; /* 统一文字颜色 */
}

.el-menu .is-active {
  background-color: #FFE5D9; /* 保持蜜桃奶白背景 */
  color: #FF6B6B !important; /* 激活文字改为深玫瑰粉 */
  font-weight: 600;
}

.el-sub-menu__title:hover {
  background-color: #FFB7C5; /* 悬停改为樱花粉（与主背景形成渐变层次） */
}

.el-menu-item:not(.is-active):hover {
  color: #FADADD; /* 保持原有玫瑰粉 */
  background-color: #FFE5D9; /* 新增悬停背景（与激活状态呼应） */
}

.el-tooltip__trigger {
  outline: none;
}

.el-dropdown {
  cursor: pointer;
}


.el-menu-inline .el-menu-item {
  padding-left: 48px !important;
}
</style>